<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>上传文件</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 178px;
        height: 178px;
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }

      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }

      .image-preview {
        width: 178px;
        height: 178px;
        position: relative;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        float: left;
      }

      .image-preview .image-preview-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .image-preview .image-preview-wrapper img {
        width: 100%;
        height: 100%;
      }

      .image-preview .image-preview-action {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s;
        cursor: pointer;
        text-align: center;
        line-height: 200px;
      }

      .image-preview .image-preview-action .el-icon-delete {
        font-size: 32px;
      }

      .image-preview:hover .image-preview-action {
        opacity: 1;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <el-upload
        v-show="imageUrl.length < 1"
        class="avatar-uploader"
        :action="serverUrl"
        :show-file-list="false"
        multiple
        :before-upload="beforeUpload"
        :headers="token"
        :on-success="handleSuccess"
        :on-progress="uploadProcess"
      >
        <i
          v-show="imageUrl =='' && imgFlag == false"
          class="el-icon-plus avatar-uploader-icon"
        ></i>
        <el-progress
          v-show="imgFlag == true"
          type="circle"
          :percentage="percent"
          style="margin-top: 20px;"
        ></el-progress>
      </el-upload>

      <div class="image-preview" v-show="imageUrl.length > 1">
        <div class="image-preview-wrapper">
          <img :src="imageUrl" />
          <div class="image-preview-action">
            <i @click="handleRemove" class="el-icon-delete"></i>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          serverUrl: '/api/upload/single', // 后台上传接口
          token: {},
          imgFlag: false,
          percent: 0,
          imageUrl: '',
        }
      },
      mounted() {},
      methods: {
        handleRemove(file, fileList) {
          this.imageUrl = ''
        },
        beforeUpload(file) {
          const isLt10M = file.size / 1024 / 1024 < 10
          if (
            ['image/jpeg', 'image/gif', 'image/png', 'image/bmp'].indexOf(
              file.type,
            ) == -1
          ) {
            this.$message.error('请上传正确的图片格式')
            return false
          }
          if (!isLt10M) {
            this.$message.error('上传图片不能超过10MB哦!')
            return false
          }
          // 设置认证信息
          const token = window.localStorage.getItem('token')
          this.token['Authorization'] = 'Bearer ' + token
        },
        handleSuccess(res, file) {
          this.imgFlag = false
          this.percent = 0
          if (res) {
            this.imageUrl = URL.createObjectURL(file.raw) // 项目中用后台返回的真实地址
          } else {
            this.$message.error('视频上传失败，请重新上传！')
          }
        },
        uploadProcess(event, file, fileList) {
          this.imgFlag = true
          console.log(event.percent)
          this.percent = Math.floor(event.percent)
        },
      },
    })
  </script>
</html>
